<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据注入</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="应用">
        <my-list :计数="5"></my-list>
    </div>
    <script>
        const 应用 = Vue.createApp()
        const 标签组件 = {
            props: {
                索引: Number,
            },
            inject: ['列表计数'],
            template: `
                <div>{{索引}}/{{列表计数}}</div>
            `,
        }
        const 元素组件 = {
            props: {
                索引: Number,
            },
            components: {
                'my-label': 标签组件,
            },
            template: `
                <div style="border: blue solid 10px;">
                    <my-label :索引="this.索引"></my-label>
                </div>
            `,
        }
        const 列表组件 = {
            props: {
                计数: Number,
            },
            provide() {
                return {
                    列表计数: this.计数,
                }
            },
            components: {
                'my-item': 元素组件,
            }, 
            template: `
                <div style="border: red solid 10px;">
                    <my-item v-for="i in this.计数" :列表计数="this.计数" :索引="i"></my-item>
                </div>
            `,
        }
        应用.component('my-list', 列表组件)
        应用.mount('#应用')
    </script>
</body>
</html>